<template>
    <view class="white-block">
        <view class="top-block">
            <view class="income-block">
                <p>收入</p>
                <p style="color: #00CC99;">￥{{ props.income }}</p>
            </view>
            <view class="line"></view>
            <view class="expense-block">
                <p>支出</p>
                <p style="color: #FF6B6B;">￥{{ props.expense }}</p>
            </view>
        </view>
        <view class="total-block">
            <p>结余 <span style="color: #333333;font-size: 32rpx;">￥{{ total }}</span></p>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue'

const props = defineProps({
    income: {
        type: Number,
        default: 0
    },
    expense: {
        type: Number,
        default: 0
    },
})

const total = computed(() => props.income - props.expense)
</script>

<style lang="less" scoped>
.white-block {
    height: 250rpx;
    margin-top: 20rpx;
    .top-block{
        height: 110rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        font-size: 28rpx;
        .line{
            width: 1rpx;
            height: 60rpx;
            background-color: #EEEEEE;
        }
        .income-block, .expense-block{
            width: 49%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            justify-content: center;
            p:nth-child(2){
                font-size: 40rpx;
            }
        }
    }
    .total-block{
        height: 100rpx;
        width: 630rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
        font-size: 28rpx;
        border-top: 1rpx solid #EEEEEE;
    }
}
</style>
